<template>
    <div class="login-form">
        <div class="form-group">
            <label>
                手机号码
            </label>
            <input type="number" placeholder="手机号码" autocomplete="off" v-model="phone"/>
        </div>
        <div class="form-group">
            <label>
                验证码
            </label>
            <input type="password" v-model="smsCode" placeholder="短信验证码" autocomplete="off"/>
            <div class="code-btn" @click="getCode()">
                <span v-if="times>0">
                    {{times}} s
                </span>
                <span v-else>
                    获取验证码
                </span>
            </div>
        </div>
        <div class="tip">
            提示：动态密码登录，支持仟姿分期<span>销售绑定的手机号码</span>登录。
        </div>
        <div class="btn" @click="smsLogin" v-bind:class="{active:loginActive}">
            登录
        </div>
    </div>
</template>
<script>
    import axios from "axios"
    import Config from '../../api/config'
    import local from "../../util/local"
    export default{
        name: 'quickLogon',
        data: function () {
            return {
                phone: '',
                smsCode: '',
                times: 0
            }
        },
        computed: {
            loginActive(){
                return (this.phone != "" && this.smsCode != '')
            },
        },
        methods: {
            getCode(){
                let self = this
                if (self.times !== 0) {
                    return false;
                }
                self.$store.dispatch({
                    type: "sendSms",
                    phone: this.phone,
                }).then(function (res) {
                    self.times = 10;
                    let interval = window.setInterval(function () {
                        if (self.times-- <= 1) {
                            window.clearInterval(interval);
                        }
                    }, 1000);
                }, function (err) {
                })
            },
            smsLogin(){
                let self = this;
                this.$store.dispatch({
                    type: "smsLogin",
                    phone: this.phone,
                    smsCode: this.smsCode
                }).then(function (res) {
                    self.onSuccess(res);
                }, function (err) {
                })
            },
            onSuccess: function (res) {
                this.$store.commit({type: 'resetParam'})
                if (res.must_update_role=='1') {
                    this.$router.push("/selectRole")
                } else {
                    this.$router.push("/order")
                }
            },
            onError: function (err) {
                this.$alert(err.message)
            }
        },
        created(){
            if (local.get('username') && local.get('must_update_role')=='0') {
                this.$router.push("/order")
            }
        }
    }
</script>
